<template>
   <div class="page-box">
      <div class="page-title">
         {{ '客户管理' }}
      </div>

      <div class="page-search">
         <div class="search-box" :style="{ height: IsHeight }">
            <el-input v-model="pageData.keywords" placeholder="请输入管家站名称"
               style="width: 200px; margin-right: 10px; margin-bottom: 10px;" />
            <!-- <el-input v-model="pageData.level_name" placeholder="请输入客户等级"
               style="width: 200px; margin-right: 10px; margin-bottom: 10px;" /> -->
            <!-- 下拉选择 -->
            <!-- <el-select v-model="pageData.status" placeholder="请选择状态"
               style="width: 200px; margin-right: 10px; margin-bottom: 10px;">
               <el-option label="启用" value="1" />
               <el-option label="禁用" value="0" />
            </el-select> -->
         </div>

         <div class="search-btn">
            <div class="btn_item" @click="handleClickHeight">
               <img class="btn_img" src="@/assets/sx.png" alt=""> <span> 高级筛选 </span>
            </div>
            <div class="btn_item">
               <img class="btn_img" src="@/assets/dc.png" alt=""> <span> 导出 </span>
            </div>
            <div class="btn_item">
               <img class="btn_img" src="@/assets/dr.png" alt=""> <span> 导入 </span>
            </div>
         </div>

      </div>
      <div class="search-btn-right">
         <el-button color="#626aef" type="primary" @click="handleClickAdd"> 新增客户 </el-button>
      </div>
   </div>

   <div class="table-box">

      <el-table :data="tabeData" style="width: 100%" v-loading="loading" border>
         <el-table-column align="center" prop="name" label="客户名称" width="200" />
         <el-table-column align="center" label="地区" width="auto">
            <template #default="scope">
               {{ scope.row.province + '省' + scope.row.city + '市' + scope.row.area }}
            </template>
         </el-table-column>
         <el-table-column align="center" prop="address" label="详细地址" width="auto">
         </el-table-column>
         <el-table-column align="center" prop="level_name" label="客户等级" width="auto">
         </el-table-column>
         <el-table-column align="center" prop="shop_name" label="管家站名称" width="auto">
         </el-table-column>
         <el-table-column align="center" prop="contact_name" label="负责人" width="auto" />
         <el-table-column align="center" prop="contact_phone" label="负责人电话" width="auto" />
         <el-table-column align="center" prop="note" label="备注" width="auto" />
         <el-table-column align="center" prop="creator_name" label="创建人" width="auto" />
         <el-table-column align="center" prop="status" label="状态" width="auto">
            <template #default="scope">
               <el-switch v-model="scope.row.status" inline-prompt :active-value="1" :inactive-value="0"
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="上架"
                  inactive-text="下架" @click="handleState(scope.row)" />
            </template>
         </el-table-column>
         <el-table-column fixed="right" label="操作" width="180" prop="id" align="center">
            <template #default="scope">
               <div class="btn-box">
                  <el-button plain size="small" type="primary" @click="handleClickEdit(scope.row)"> 编辑 </el-button>
                  <el-button plain size="small" type="danger" @click="handleClick(scope.row)"> 删除 </el-button>
                  <el-button plain size="small" type="success" @click="handleClickDetails(scope.row)"> 详情 </el-button>
               </div>
            </template>
         </el-table-column>
      </el-table>
   </div>
   <!-- 分页 -->
   <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
      :page-size="pageData.pageSize" :total="total" />
   <!-- 新增出库 -->
   <AddedOutbound ref="AddedOutboundRef" @init="getAlltabeData" />
   <!-- 出库详情 -->
   <OutboundDetails v-model:dialogVisible="DetailsVisible" :dialogRow="dialogRow" @submit="handleSubmit" />
</template>

<script setup lang="ts">
import api from "@/api";
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { usePlatformManagementStore } from "@/stores";
import { ElMessageBox, ElMessage } from "element-plus";
import Pagination from "@/components/Pagination.vue";
import AddedOutbound from "./components/AddedOutbound.vue";
import OutboundDetails from "./components/OutboundDetails.vue";
const platformManagementStore = usePlatformManagementStore();
const router = useRouter();
//  新增出库
const AddedOutboundRef = ref<any>(null);
// 出库详情
let IsHeight = ref<number | string>(0);
//  -----------------出库详情抽屉
//  出库详情
const DetailsVisible = ref<boolean>(false);
// 定义仓库数据类型
interface Warehouse {
   id: string | number;
   title: string;
   code: string;
   house_type?: string;
   house_type_name?: string;
   category_name?: string;
   manager?: string;
   phone?: string;
   address?: string;
   remark?: string;
   parent_id?: string | number;
   parent_name?: string;
   children?: Warehouse[];
   create_time?: string;
   creator?: string;
   rowNumber?: number;
}
let dialogRow = ref<Warehouse>({} as Warehouse);
//  -----------------列表数据
const pageData = ref({
   pageSize: 10,
   page: 1,
   status: "",
   keywords: "",
   level_name: "",
});
const total = ref(0);
const tabeData = ref([]);
// 侦听动态分页
watch(
   () => {
      return pageData.value;
   },
   () => {
      getAlltabeData();
   },
   { deep: true }
);

let nub = ref<number>(0);
const handleClickHeight = () => {
   nub.value++;
   if (nub.value % 2 == 1) {
      IsHeight.value = '100px';
   } else {
      IsHeight.value = '0px';
   }
}

const pageSize = (e: number) => {

   pageData.value.pageSize = e
}
const getPage = (e: number) => {
   pageData.value.page = e
}

// 获取门店列表
const getAlltabeData = async () => {
   const res = await api.Outbound.getoutboundList({
      ...pageData.value,
   });
   console.log(res);

   if (res.code == 200) {
      tabeData.value = res.data.data;
      total.value = res.data.pager.total_records;
   }
};

// 切换状态
const handleState = async (row: any) => {
   const res = await api.Outbound.switchoutbound({
      id: row.id,
   });
   if (res.code == 200) {
      ElMessage.success(res.message || '切换状态成功');
      getAlltabeData(); // 刷新列表
   } else {
      ElMessage.error(res.message || '切换状态失败');
   }
}

const loading = ref(false);
//  新增出库
const handleClickAdd = () => {
   AddedOutboundRef.value.openLoadings();
}

// 编辑
const handleClickEdit = async (row: any) => {
   // 编辑的时候调用客户详情接口
   const res = await api.Outbound.getoutboundDetails({
      id: row.id,
   });
   if (res.code == 200) {
      AddedOutboundRef.value.openLoadings(res.data);
   }

}

//删除
const handleClick = (row) => {
   ElMessageBox.confirm(
      `确定要删除当前数据嘛？`,
      '删除确认',
      {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
      }
   )
      .then(async () => {
         try {
            loading.value = true;
            const res = await api.Outbound.deleteoutbound({
               ids: [row.id],
            });
            if (res.code === 200) {
               ElMessage.success(res.message || '删除成功');
               getAlltabeData(); // 刷新列表
            } else {
               ElMessage.error(res.message || '删除失败');
            }
         } catch (error) {
            console.error('产品删除异常:', error);
            // ElMessage.error('删除失败，请稍后重试');
         } finally {
            loading.value = false;
         }
      })
      .catch(() => {
         ElMessage({
            type: 'info',
            message: '已取消删除',
         });
      });

};

//  打开出库详情抽屉
const handleClickDetails = async (row: any) => {
   // 获取客户详情
   const res = await api.Outbound.getoutboundDetails({
      id: row.id,
   });
   if (res.code == 200) {
      DetailsVisible.value = true;
      dialogRow.value = res.data;
   }

}

// 处理详情弹窗的提交事件
const handleSubmit = () => {
   // 处理详情弹窗提交后的逻辑
   console.log('详情弹窗提交');
   getAlltabeData(); // 刷新列表
};

onMounted(() => {
   getAlltabeData();
})
</script>

<style lang="scss" scoped>
.btn-box {
   display: flex;
   align-items: center;
   justify-content: center;
}

// 输入框样式
::v-deep .el-input__wrapper {
   background-color: rgba(250, 252, 251, 1);
}

//表格样式

::v-deep .el-table {
   --el-table-header-bg-color: rgba(235, 236, 240, 1);
}

::v-deep .el-table thead {
   color: #444;
}

//分页样式
.pagination {
   width: calc(100% - 250px);
   position: fixed;
   bottom: 20px;
   right: 20px;
   padding-top: 10px;
   border-top: 1px solid #98989848;


}

::v-deep .el-pagination.is-background .el-pager li.is-active {
   background-color: #000 !important;
}
</style>